<template>
  <div class="service-form">
    <el-form :model="form" label-width="120px" size="small">
      <el-form-item label="职务/活动类型" required>
        <el-input v-model="form.serviceType" placeholder="请输入职务或活动类型" />
      </el-form-item>

      <el-form-item label="活动描述" required>
        <el-input 
          v-model="form.description" 
          type="textarea" 
          :rows="3"
          placeholder="请详细描述活动内容" 
        />
      </el-form-item>

      <el-form-item label="服务得分" required>
        <el-input-number 
          v-model="form.score" 
          :min="0" 
          :max="20"
          :precision="2"
          placeholder="请输入得分" 
        />
      </el-form-item>

      <el-form-item label="所属学期" required>
        <el-select v-model="form.semester" placeholder="请选择学期">
          <el-option label="第一学年" value="第一学年" />
          <el-option label="第二学年" value="第二学年" />
          <el-option label="第三学年" value="第三学年" />
        </el-select>
      </el-form-item>

      <el-form-item label="学院认定" required>
        <el-select v-model="form.approved" placeholder="请选择">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="resetForm" style="margin-left: 10px;">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { getStudentId } from '@/utils/studentInfo.js'

export default {
  name: 'ServiceForm',
  data() {
    return {
      form: {
        serviceType: '',
        description: '',
        score: null,
        semester: '',
        approved: null
      }
    }
  },
  methods: {
    async handleSave() {
      const studentId = getStudentId()
      if (!studentId) {
        ElMessage.error('未检测到登录学号，请重新登录')
        return
      }

      const { serviceType, description, score, semester, approved } = this.form
      if (!serviceType.trim() || !description.trim() || score === null || !semester || approved === null) {
        ElMessage.error('请完整填写所有必填字段')
        return
      }

      const payload = {
        studentId: Number(studentId),
        serviceType: serviceType.trim(),
        description: description.trim(),
        score: score,
        semester,
        approved
      }

      try {
        const res = await axios.post('/api/socialservices', payload, {
          headers: { 'Content-Type': 'application/json' },
          withCredentials: true
        })
        if (res.data === 1 || res.data === '1' || (res.data.code && res.data.code === 200)) {
          ElMessage.success('社会服务保存成功')
          this.resetForm()
        } else {
          ElMessage.error(res.data.message || '保存失败，请稍后重试')
        }
      } catch (error) {
        console.error('保存失败:', error)
        ElMessage.error('保存失败，请稍后重试')
      }
    },

    resetForm() {
      this.form.serviceType = ''
      this.form.description = ''
      this.form.score = null
      this.form.semester = ''
      this.form.approved = null
    }
  }
}
</script>

<style scoped>
.service-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
  background-color: #fafafa;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
</style>
